<template>
    <div class="my-image">
        <div class="header">
            <div class="title">检测结果</div>
            <div class="status-bar">
                <span class="status-dot" :class="{ 'connected': isConnected }"></span>
                <span class="status-text">{{ statusText }}</span>
            </div>
        </div>
        <div class="image-container">
            <img v-if="imageUrl" :src="imageUrl" alt="WebSocket" class="image-content" />
            <div v-else class="loading-placeholder">
                <span class="loading-text">等待连接...</span>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, onBeforeUnmount, ref, computed } from 'vue'

const imageUrl = ref<string>('')
let ws: WebSocket | null = null  // WebSocket连接和重连逻辑
let reconnectTimer: number | null = null;
const isConnected = ref(false)

const statusText = computed(() => {
    if (isConnected.value) return '已连接'
    if (reconnectTimer !== null) return '正在重连...'
    return '未连接'
})

// 生命周期钩子
onMounted(() => {
    console.log('组件已挂载')
    connectWebSocket()
})

onBeforeUnmount(() => {
    console.log('组件即将卸载')
    if (ws) {
        ws.close()
    }
    if (reconnectTimer !== null) {
        clearTimeout(reconnectTimer)
    }
})

const connectWebSocket = () => {
    try {
        ws = new WebSocket('ws://localhost:30001')

        ws.onopen = () => {
            console.log('WebSocket连接已建立')
            isConnected.value = true
        }

        ws.onmessage = (event) => {
            imageUrl.value = `data:image/png;base64,${event.data}`
        }

        ws.onerror = (error) => {
            console.error('WebSocket错误:', error)
            isConnected.value = false
            if (ws) {
                ws.close()
            }
        }

        ws.onclose = () => {
            console.log('WebSocket连接已关闭，准备重连...')
            isConnected.value = false
            if (reconnectTimer === null) {
                reconnectTimer = window.setTimeout(() => {
                    reconnectTimer = null
                    connectWebSocket()
                }, 1000)
            }
        }
    } catch (error) {
        console.error('WebSocket连接失败:', error)
        isConnected.value = false
        if (reconnectTimer === null) {
            reconnectTimer = window.setTimeout(() => {
                reconnectTimer = null
                connectWebSocket()
            }, 1000)
        }
    }
}
</script>

<style scoped lang="scss">
.my-image {
    position: relative;
    width: 640px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .header {
        background-color: rgba(0, 0, 0, 0.9);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);

        .title {
            padding: 12px;
            color: rgba(255, 255, 255, 0.95);
            font-size: 16px;
            font-weight: 500;
            text-align: center;
        }

        .status-bar {
            padding: 8px;
            background-color: rgba(0, 0, 0, 0.8);
            display: flex;
            align-items: center;
            gap: 8px;

            .status-dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background-color: #ff4d4f;
                transition: background-color 0.3s;

                &.connected {
                    background-color: #52c41a;
                }
            }

            .status-text {
                color: rgba(255, 255, 255, 0.85);
                font-size: 12px;
            }
        }
    }

    .image-container {
        position: relative;
        background-color: rgba(0, 0, 0, 0.6);
        width: 640px;
        height: 512px;

        .image-content {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .loading-placeholder {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;

            .loading-text {
                color: rgba(255, 255, 255, 0.45);
                font-size: 14px;
            }
        }
    }
}
</style> 